<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="app-title">【{{ getCategoryName(item.category) }}】{{ getShortTitle(item.title) }}</text>
      <view class="header-icons">
        <text class="icon">⋯</text>
        <text class="icon">─</text>
        <text class="icon">◎</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 广告标题 -->
      <view class="ad-title">
        <text class="title-text">{{ item.title }}</text>
      </view>

      <!-- 标签区域 -->
      <view class="tags-section">
        <view class="tag-item red">优惠活动</view>
        <view class="tag-item red">{{ getCategoryName(item.category) }}</view>
      </view>

      <!-- 关键信息框 -->
      <view class="info-box">
        <view class="info-item">
          <text class="info-label">宝贝价格</text>
          <text class="info-value">{{ item.priceNote }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">交易方式</text>
          <text class="info-value">{{ item.transactionMethod }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">宝贝成色</text>
          <text class="info-value">{{ item.itemCondition }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">付款方式</text>
          <text class="info-value">{{ item.paymentMethod }}</text>
        </view>
      </view>

      <!-- 详细描述 -->
      <view class="description-section">
        <text class="description-text">{{ item.description }}</text>
      </view>

      <!-- 发布时间和统计信息 -->
      <view class="stats-section">
        <text class="publish-date">{{ formatDate(item.publishTime) }}发布</text>
        <view class="stats-right">
          <text class="stat-item">分享:{{ item.shares || 0 }}</text>
          <text class="stat-item">浏览:{{ item.views || 0 }}</text>
        </view>
      </view>

      <!-- 联系信息 -->
      <view class="contact-section">
        <view class="contact-info">
          <text class="contact-label">联系人:{{ item.contactPerson }}</text>
          <text class="contact-note">联系我时,请说是在高安百事通上看到的,谢谢!</text>
        </view>
        <button class="call-btn" @click="makeCall(item)">
          <text class="phone-icon">📞</text>
          <text class="call-text">打电话</text>
        </button>
      </view>

      <!-- 举报信息 -->
      <view class="report-section">
        <view class="report-info">
          <text class="warning-icon">⚠</text>
          <text class="report-text">如遇无效、虚假、诈骗信息,请立即举报</text>
        </view>
        <button class="service-btn" @click="contactService">客服</button>
      </view>

      <!-- 留言区域 -->
      <view class="message-section">
        <view class="message-header">
          <text class="message-title">留言</text>
          <view class="leave-message" @click="leaveMessage">
            <text class="leave-text">我要留言</text>
            <text class="arrow">▶</text>
          </view>
        </view>
        <view class="view-comments">
          <text class="comments-link">查看更多评论</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="left-nav">
        <view class="nav-item active" @click="navigateToTab('home')">
          <text class="nav-icon">🏠</text>
          <text class="nav-text">首页</text>
        </view>
        <view class="nav-item" @click="navigateToTab('publish')">
          <text class="nav-icon">✏️</text>
          <text class="nav-text">发布</text>
        </view>
        <view class="nav-item" @click="navigateToTab('mine')">
          <text class="nav-icon">😊</text>
          <text class="nav-text">我的</text>
        </view>
      </view>
      <view class="right-actions">
        <button class="action-btn share-btn" @click="shareItem">分享</button>
        <button class="action-btn consult-btn" @click="consultItem">咨询</button>
        <button class="action-btn call-action-btn" @click="makeCall(item)">打电话</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getPromotionAdDetail } from '@/api/promotion'

export default {
  data() {
    return {
      item: {
        id: 1,
        title: '高安卫眼世家,专注眼睛视力健康服务,对青少年的近视,斜视,散光,弱视等问题都可以养护到不用戴眼镜,还有中老年的眼干,迎风流泪,白内障,飞蚊等症状有效缓解。还有失眠等问题都可以缓解。欢迎各位朋友光临!',
        category: 'other',
        adType: '服务推广',
        priceNote: '面议',
        transactionMethod: '仅支持快递2',
        itemCondition: '全新宝贝2',
        paymentMethod: '仅现金2',
        description: '高安卫眼世家,专注眼睛视力健康服务,对青少年的近视,斜视,散光,弱视等问题都可以养护到不用戴眼镜,还有中老年的眼干,迎风流泪,白内障,飞蚊等症状有效缓解。还有失眠等问题都可以缓解。欢迎各位朋友光临!',
        publishTime: '2025-06-09',
        views: 1662,
        shares: 16,
        contactPerson: '伍女士',
        contactPhone: '13800138000',
        status: 1
      }
    }
  },
  onLoad(options) {
    // 从路由参数获取广告ID，这里暂时使用静态数据
    if (options.id) {
      // 根据ID获取广告详情
      this.getItemDetail(options.id);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getCategoryName(category) {
      const categoryNames = {
        'food': '美食推广',
        'tourism': '旅游景点',
        'education': '教育培训',
        'other': '其他广告'
      };
      return categoryNames[category] || '其他广告';
    },
    getShortTitle(title) {
      if (title.length > 20) {
        return title.substring(0, 20) + '...';
      }
      return title;
    },
    formatDate(dateStr) {
      if (!dateStr) return '';
      return dateStr;
    },
    makeCall(item) {
      console.log('拨打电话给:', item.contactPerson);
      uni.showToast({
        title: `拨打电话给${item.contactPerson}`,
        icon: 'none'
      });
    },
    leaveMessage() {
      uni.showToast({
        title: '留言功能',
        icon: 'none'
      });
    },
    shareItem() {
      uni.showToast({
        title: '分享功能',
        icon: 'none'
      });
    },
    consultItem() {
      uni.showToast({
        title: '咨询功能',
        icon: 'none'
      });
    },
    navigateToTab(tab) {
      console.log('导航到标签页:', tab);
      if (tab === 'publish') {
        uni.showToast({
          title: '发布功能',
          icon: 'none'
        });
      } else if (tab === 'mine') {
        uni.showToast({
          title: '我的页面',
          icon: 'none'
        });
      } else if (tab === 'home') {
        uni.navigateTo({
          url: '/pages/index'
        });
      }
    },
    contactService() {
      uni.showToast({
        title: '联系客服',
        icon: 'none'
      });
    },
    getItemDetail(id) {
      // 这里调用接口获取广告详情
      console.log('获取广告详情:', id);
      // 调用真实API
      this.callPromotionAdApi(id);
    },
    callPromotionAdApi(id) {
      // 调用后端接口获取广告详情
      getPromotionAdDetail(id).then(res => {
        if (res.code === 200) {
          this.item = res.data;
        } else {
          uni.showToast({
            title: res.msg || '获取详情失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('获取广告详情失败:', err);
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        });
      });
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 顶部标题栏 */
.header {
  background-color: #4CAF50;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-icon {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.app-title {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
  margin: 0 20rpx;
}

.header-icons {
  display: flex;
  gap: 20rpx;
}

.icon {
  color: white;
  font-size: 32rpx;
}

/* 主要内容区域 */
.main-content {
  background-color: white;
  margin: 20rpx;
  border-radius: 15rpx;
  padding: 30rpx;
}

/* 广告标题 */
.ad-title {
  margin-bottom: 25rpx;
}

.title-text {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.5;
}

/* 标签区域 */
.tags-section {
  display: flex;
  gap: 15rpx;
  margin-bottom: 25rpx;
}

.tag-item {
  background-color: #F44336;
  color: white;
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.tag-item.red {
  background-color: #F44336;
}

/* 关键信息框 */
.info-box {
  background-color: #f8f8f8;
  border-radius: 10rpx;
  padding: 25rpx;
  margin-bottom: 25rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 26rpx;
  color: #666;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
}

/* 详细描述 */
.description-section {
  margin-bottom: 25rpx;
}

.description-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

/* 统计信息 */
.stats-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.publish-date {
  font-size: 24rpx;
  color: #999;
}

.stats-right {
  display: flex;
  gap: 20rpx;
}

.stat-item {
  font-size: 24rpx;
  color: #999;
}

/* 联系信息 */
.contact-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.contact-note {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.call-btn {
  background-color: #F44336;
  color: white;
  border: none;
  border-radius: 25rpx;
  padding: 15rpx 25rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.phone-icon {
  font-size: 24rpx;
}

.call-text {
  font-size: 24rpx;
}

/* 举报信息 */
.report-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.report-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.warning-icon {
  color: #FF9800;
  font-size: 28rpx;
  margin-right: 10rpx;
}

.report-text {
  font-size: 24rpx;
  color: #666;
}

.service-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 20rpx;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
}

/* 留言区域 */
.message-section {
  padding-bottom: 20rpx;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.message-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.leave-message {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.leave-text {
  font-size: 26rpx;
  color: #666;
}

.arrow {
  font-size: 24rpx;
  color: #666;
}

.view-comments {
  text-align: center;
}

.comments-link {
  font-size: 24rpx;
  color: #4CAF50;
  text-decoration: underline;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #e0e0e0;
  z-index: 1000;
}

.left-nav {
  display: flex;
  gap: 40rpx;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.nav-item.active {
  color: #333;
}

.nav-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-size: 20rpx;
}

.right-actions {
  display: flex;
  gap: 15rpx;
}

.action-btn {
  border: none;
  border-radius: 25rpx;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
  color: white;
}

.share-btn {
  background-color: #2196F3;
}

.consult-btn {
  background-color: #FF9800;
}

.call-action-btn {
  background-color: #F44336;
}
</style>
